<script setup lang='ts'>
import { reactive } from 'vue'

const visible = defineModel<boolean>()
const a = ref('普通')
const customValue = ref([])

const form = reactive({
  name: '',
  region: '',
  v1: '',
  v2: '',
  v3: '',
  v4: '',
  v5: '',
  v6: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  customer: '',
})
const options = [
  {
    value: '无',
    label: '无',
  },
  {
    value: '理想',
    label: '理想',
    children: [
      {
        value: '无',
        label: '无',
      },
      {
        value: '罗可',
        label: '罗可',
        children: [
          {
            value: '无',
            label: '无',
          },
          {
            value: '王林',
            label: '王林',
          },
          {
            value: '韩立',
            label: '韩立',
          },
          {
            value: '萧炎',
            label: '萧炎',
          },
        ],
      },
      {
        value: '理可',
        label: '理可',
        children: [
          {
            value: '无',
            label: '无',
          },
          {
            value: '林严',
            label: '林严',
          },
          {
            value: '陆逊',
            label: '陆逊',
          },
          {
            value: '罗华',
            label: '罗华',
          },

        ],
      },
    ],
  },
  {
    value: '阿里',
    label: '阿里',
    children: [
      {
        value: '无',
        label: '无',
      },
      {
        value: '淘宝',
        label: '淘宝',
        children: [
          {
            value: '无',
            label: '无',
          },
          {
            value: '罗峰',
            label: '罗峰',
          },
          {
            value: '林东',
            label: '林东',
          },
          {
            value: '王希',
            label: '王希',
          },
          {
            value: '陆紫',
            label: '陆紫',
          },
        ],
      },
      {
        value: '天猫',
        label: '天猫',
        children: [
          {
            value: '罗峰',
            label: '罗峰',
          },
          {
            value: '林东',
            label: '林东',
          },
          {
            value: '王希',
            label: '王希',
          },
          {
            value: '陆紫',
            label: '陆紫',
          },
        ],
      },
      {
        value: '飞猪',
        label: '飞猪',
        children: [
        ],
      },
      {
        value: '菜鸟网络',
        label: '菜鸟网络',
        children: [
          {
            value: '徐欣',
            label: '徐欣',
          },
          {
            value: '珍妮特',
            label: '珍妮特',
          },
        ],
      },
    ],
  },
  {
    value: '字节',
    label: '字节',
    children: [
      {
        value: '无',
        label: '无',
      },
      {
        value: '抖音',
        label: '抖音',
        children: [
          {
            value: '无',
            label: '无',
          },
          {
            value: '李耀',
            label: '李耀',
          },
          {
            value: '张若瑜',
            label: '张若瑜',
          },
        ],
      },
    ],
  },

]
function handleChange(value) {
  console.log('[ value ]-156', value)
}
const businessList = [
  {
    value: '理想罗可业务',
    label: '理想罗可业务',
  },
  {
    value: '字节抖音业务',
    label: '字节抖音业务',
  },
  {
    value: '阿里天猫业务',
    label: '阿里天猫业务',
  },
]
</script>

<template>
  <el-dialog
    v-model="visible"
    title="发起客户服务流程"
    width="600px"
    :before-close="() => visible = false"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="业务归集*">
        <el-select
          v-model="form.name"
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          placeholder="请为此业务命名,可选择已有/或输入业务名自行创建"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in businessList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-divider direction="horizontal">
        客户信息
      </el-divider>

      <el-form-item label="客户*">
        <el-cascader v-model="customValue" :options="options" class="!w-full" @change="handleChange" />
      </el-form-item>

      <el-form-item v-if="customValue[0] === '无'" label="客户主体(商标)名称*">
        <el-input v-model="form.v1" />
      </el-form-item>

      <el-form-item v-if="customValue[0] === '无' || customValue[1] === '无'" label="客户签约主体名称">
        <el-input v-model="form.v2" />
      </el-form-item>
      <template v-if="customValue[0] === '无' || customValue[1] === '无' || customValue[2] === '无'">
        <el-form-item label="对接人姓名*">
          <el-input v-model="form.v3" />
        </el-form-item>
        <el-form-item label="联系方式*">
          <el-input v-model="form.v4" />
        </el-form-item>
        <el-form-item label="角色*">
          <el-input v-model="form.v5" />
        </el-form-item>
      </template>
      <el-form-item label="服务级别">
        <el-select placeholder="">
          <el-option label="无" value="1" />
          <el-option label="一级(鲸鱼)" value="1" />
          <el-option label="二级(海豚)" value="2" />
          <el-option label="三级(鲨鱼)" value="3" />
          <el-option label="四级(杂鱼)" value="4" />
        </el-select>
      </el-form-item>
      <!-- <el-alert type="info" effect="light" show-icon closable>
        模糊搜索
      </el-alert> -->

      <el-divider direction="horizontal">
        业务描述
      </el-divider>
      <el-form-item label="业务优先级*">
        <el-select v-model="a" placeholder="">
          <el-option label="紧急（1 小时通知一次）" value="紧急" />
          <el-option label="普通（3 小时通知一次）" value="普通" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型*">
        <el-select placeholder="">
          <el-option label="云专线" value="云专线" />
          <el-option label="云网络" value="云网络" />
          <el-option label="Fusionwan" value="Fusionwan" />
        </el-select>
      </el-form-item>
      <el-form-item label="商机来源*">
        <el-select placeholder="">
          <el-option label="市场" value="市场" />
          <el-option label="渠道" value="渠道" />
          <el-option label="老客户" value="老客户" />
          <el-option label="新开发" value="新开发" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <SLAItem />
      <el-form-item label="预估报价*">
        <el-input placeholder="">
          <template #append>
            元
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="项目经理(PM)*">
        <el-select placeholder="">
          <el-option label="张三" value="张三" />
          <el-option label="李四" value="李四" />
        </el-select>
      </el-form-item>
      <el-form-item label="售前*">
        <el-select placeholder="">
          <el-option label="王五" value="王五" />
          <el-option label="赵六" value="赵六" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务需求描述*">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="成单关键要素">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click=" visible = false">暂存</el-button>
        <el-button @click=" visible = false">关闭</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
